<template>
    <div class="tags">
        <el-tag 
            v-for="(tag,index) in tags"
            :key ="tag.name"   
            :closable="tag.name !== 'home'"
            :disable-transitions = "false"
            :effect="$route.name === tag.name ? 'dark' : 'plain'"
            @click="handleSkip(tag)"
            @close="handleClose(tag,index)"
        >
            {{ tag.title }}
        </el-tag>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute ,useRouter} from 'vue-router'
const store = useStore()
const route = useRoute()
const router = useRouter()
//获取标签导航
const tags = store.state.tabsList;
//标签之间跳转
const handleSkip =(tag)=>{
    router.push(tag.path)
}

//删除导航标签
const handleClose = (tag,index)=>{
    let length = tags.length - 1
    //处理vuex中的tablist
    store.commit('closeTab',tag)
    //做第一个判断
    if(tag.name !== route.name ){
        return;
    }
    if(index === length){
        router.push({
            name:tags[index-1].name
        })
    }else{
        router.push({
            name: tags[index].name
        })
    }
}

</script>

<style scoped>
.tags{
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    .el-tag{
        margin-right: 5px;
    }
}
</style>